<!--
 * @Author: Y先森
 * @Date: 2023-04-14 09:48:34
 * @LastEditors: y && 250048395@qq.com
 * @LastEditTime: 2023-05-04 15:24:47
 * @FilePath: \y-website\src\views\main\components\navigation\mobile\index.vue
-->
<template>
  <div class="bg-white dark:bg-zinc-900 duration-500 sticky top-0 left-0 z-10 h-5">
    <ul class="relative flex overflow-x-auto text-xs text-zinc-600 overflow-hidden" ref="ulTarget">
      <!-- 汉堡按钮 -->
      <li
        class="z-20 fixed top-0 left-[-1px] h-4 px-1 flex items-center bg-white dark:bg-zinc-900 shadow-l-white dark:shadow-l-zinc"
        @click="onShowPopup"
      >
        <m-svg-icon class="w-2 h-2 " name="menu"></m-svg-icon>
      </li>
      <li class="w-full"> 
        <m-search v-model="inputValue">
          <template #dropdown>
            <div>搜索历史</div>
          </template>
        </m-search> 
      </li>
    </ul>

    <m-popup v-model="isVisable">
      <menu-vue @onRouteClick="onRouteClick"></menu-vue>
    </m-popup>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { ref, watch, onBeforeUpdate } from 'vue'
import menuVue from '@/views/main/components/menu/index.vue'

const router = useRouter()
const inputValue = ref('')
// popup 展示
const isVisable = ref(false)
const onShowPopup = () => {
  isVisable.value = true
}
// 菜单组件点击
const onRouteClick = (item) => {
  isVisable.value = false
  router.push({
    path: item.path
  })
}
</script>
<style scoped lang="scss"></style>
